<!-- 作用域插槽:父组件替换插槽的标签,但是内容由子组件来提供 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn>
				<!-- 目的是获取子组件中的pLanguages -->
				<template slot-scope="slot">
					<!-- <span v-for="item in slot.data">
						{{item}}-
					</span> -->
					<span>{{slot.data.join('-')}}</span>
				</template>
			</cpn>
		</div>
		
	</body>
	<template id="cpn">
		<div>
			<slot :data="pLanguages">
				<ul>
					<li v-for="item in pLanguages">{{item}}</li>
				</ul>
			</slot>
		</div>
	</template>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const cpn = {
			template:"#cpn",
			data(){
				return {
					pLanguages:['js','c++','java','go']
				}
			}
		}
		const app = new Vue({
			el : "#app",
			data:{
				
			},
			components:{
				cpn
			}
		})
	</script>
</html>
